<template>
  <div class="hot-list">
    <fs-swipe>
      <fs-swipe-item
        :is-scale="false"
        :is-tran="false"
        width="90vw"
        v-for="(item, index) in props.hotList"
        :key="index"
      >
        <div class="music-item" @click="handlePlayMusic(item[0].id)">
          <div class="music-item_cover">
            <img :src="`${item[0].picUrl}?param=200y200`" alt="" />
          </div>
          <div class="music-item_content">
            <div class="music-name">{{ item[0].name }}</div>
            <div class="music-author show-one-line">
              {{ item[0].song.artists[0].name }} - {{ item[0].song.album.name }}
            </div>
          </div>
        </div>
        <div class="music-item" @click="handlePlayMusic(item[1].id)">
          <div class="music-item_cover">
            <img :src="`${item[1].picUrl}?param=200y200`" alt="" />
          </div>
          <div class="music-item_content">
            <div class="music-name">{{ item[1].name }}</div>
            <div class="music-author show-one-line">
              {{ item[1].song.artists[0].name }} - {{ item[1].song.album.name }}
            </div>
          </div>
        </div>
      </fs-swipe-item>
    </fs-swipe>
  </div>
</template>

<script setup lang="ts">
import FsSwipe from "@/components/FsSwipe/FsSwipe.vue";
import FsSwipeItem from "@/components/FsSwipe/FsSwipeItem.vue";
import type { IHotSongItem } from "@/types/music/hotSongType";

const props = defineProps<{
  hotList: Array<IHotSongItem[]>;
}>();

const emit = defineEmits<{
  (e: "playCurrentMusic", id: number): void;
}>();

const handlePlayMusic = (id: number) => {
  emit("playCurrentMusic", id);
};
</script>

<style scoped lang="scss">
.hot-list {
  margin-bottom: 20px;
}
.music-item {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
  color: #fff;
  &_cover {
    width: 16vw;
    height: 16vw;
    border-radius: 8px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &_content {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex: 1;
    overflow: hidden;
    padding: 0 16px;
    .music-name {
      font-size: 20px;
    }
    .music-author {
      color: var(--font-light-color);
    }
  }
}
</style>
